<template>
  <q-page>
    <div class="q-pa-md">
      <q-card>
        <q-card-section>
          <div class="text-h6">用户管理</div>
        </q-card-section>

        <q-card-section>
          <q-table
            :data="users"
            :columns="columns"
            row-key="username"
            :loading="loading"
          >
            <template v-slot:body-cell-actions="props">
              <q-td :props="props">
                <q-btn flat icon="edit" @click="editUser(props.row)" />
                <q-btn flat icon="delete" @click="deleteUser(props.row.username)" />
              </q-td>
            </template>
          </q-table>
        </q-card-section>

        <q-card-section>
          <q-btn color="primary" @click="addNewUser">添加用户</q-btn>
        </q-card-section>
      </q-card>

      <!-- 添加/编辑用户对话框 -->
      <q-dialog v-model="showAddUserDialog">
        <q-card>
          <q-card-section>
            <div class="text-h6">{{ editMode ? '编辑用户' : '添加用户' }}</div>
          </q-card-section>

          <q-card-section>
            <q-input v-model="currentUser.username" label="用户名" />
            <q-input v-model="currentUser.password" label="密码" type="password" />
          </q-card-section>

          <q-card-actions align="right">
            <q-btn flat label="取消" color="primary" v-close-popup />
            <q-btn flat label="保存" color="primary" @click="saveUser" />
          </q-card-actions>
        </q-card>
      </q-dialog>
    </div>
  </q-page>
</template>

<script>
import axios from 'axios';
let serverHost = 'baota.memlee.top'
const userAll = 'http://' + serverHost + ':8999/user_all/'
const userAdd = 'http://' + serverHost + ':8999/user_add/'
const userDelete = 'http://' + serverHost + ':8999/user_delete/'

const userUpdate = 'http://' + serverHost + ':8999/user_update/'
const userCheck = 'http://' + serverHost + ':8999/user_check/'
export default {
  data() {
    return {
      users: [],
      loading: false,
      showAddUserDialog: false,
      currentUser: {
        oldUsername: '',
        username: '',
        password: ''
      },
      editMode: false,
      columns: [
        { name: 'username', label: '用户名', field: 'username', align: 'left' },
        { name: 'password', label: '密码', field: 'password', align: 'left' },
        { name: 'actions', label: '操作', align: 'center' }
      ]
    };
  },
  methods: {
    addNewUser(){
      this.showAddUserDialog = true
      this.addUser()
    },
    fetchUsers() {
      this.loading = true;
      axios.post(userAll).then(response => {
        this.users = Object.keys(response.data).map(key => ({
          username: key,
          password: response.data[key]
        }));
        this.loading = false;
      }).catch(error => {
        this.loading = false;
        this.$q.notify({ type: 'negative', message: '获取用户失败' });
      });
    },
    addUser() {
      this.editMode = false;
      this.currentUser = { username: '', password: '' };
      this.showAddUserDialog = true;
    },
    editUser(user) {
      this.editMode = true;
      this.currentUser = { ...user, oldUsername: user.username };
      this.showAddUserDialog = true;
    },
    saveUser() {
      const url = this.editMode ? userUpdate : userAdd;
      const payload = {
        oldusername: this.editMode ? this.currentUser.oldUsername : '',
        username: this.currentUser.username,
        password: this.currentUser.password
      };

      axios.post(url, payload).then(response => {
        if (response.data.code === 'ok') {
          this.$q.notify({ type: 'positive', message: '操作成功' });
          this.showAddUserDialog = false;
          this.fetchUsers();
        } else {
          this.$q.notify({ type: 'negative', message: '操作失败' });
        }
      }).catch(error => {
        this.$q.notify({ type: 'negative', message: '请求失败' });
      });
    },
    deleteUser(username) {
      axios.post(userDelete, { username }).then(response => {
        if (response.data.code === 'ok') {
          this.$q.notify({ type: 'positive', message: '删除成功' });
          this.fetchUsers();
        } else {
          this.$q.notify({ type: 'negative', message: '删除失败' });
        }
      });
    }
  },
  mounted() {
    this.fetchUsers();
    },
  created() {

  }
};
</script>

<style scoped>
/* 你的样式代码 */
</style>
